<!-- 秒杀内容 -->
<template>
  <div class="seckill">
    <!-- 秒杀的上部分 -->
    <div class="seckill-top">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png"
        alt=""
      />
      <!-- 秒杀的时间 -->
      <div class="skill-time">
        <span>{{ hours }}</span>
        <i>:</i>
        <span>{{ mins }}</span>
        <i>:</i>
        <span>{{ secs }}</span>
      </div>
      <!-- 更多 -->
      <a href="">
        更多
        <i class="iconfont icon-jiantou2"></i>
      </a>
    </div>
    <!-- 秒杀的主体部分 -->
    <div class="seckill-list">
      <ul>
        <li v-for="seckilldata in seckilldatas" :key="seckilldata.goods_id">
          <img :src="seckilldata.goods_thumb" alt="" />
          <div class="title">{{ seckilldata.title }}</div>
          <div class="current_price">
            <span
              ><em>￥</em>
              <span>{{ seckilldata.shop_price | setInt }}</span>
              <em>{{ seckilldata.shop_price | setFloat }}</em>
            </span>
          </div>
          <div class="rebate_price">
            <span
              ><em>￥</em>
              <span>{{ seckilldata.market_price | setInt }}</span>
              <em>{{ seckilldata.market_price | setFloat }}</em>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 按需引入
import { HomeSkillAPi } from "@/api/home.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      hours: "00",
      mins: "00",
      secs: "00",
      seckilldatas: [],
      interId: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    countDown() {
      let nowTime = new Date();
      let targetTime = new Date("2022-03-31 15:59:59");
      // 求时间戳---换算成秒数
      var time = (targetTime - nowTime) / 1000;
      let hours = parseInt((time / 60 / 60) % 24);
      this.hours = hours < 10 ? "0" + hours : hours;
      let mins = parseInt((time / 60) % 60);
      this.mins = mins < 10 ? "0" + mins : mins;
      let secs = parseInt(time % 60);
      this.secs = secs < 10 ? "0" + secs : secs;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.interId = setInterval(this.countDown, 1000);
    HomeSkillAPi({ num: 10 }).then((res) => {
      console.log(res);
      // console.log(res.data.data.goods);
      this.seckilldatas = res.data.data.goods;
    });
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.interId);
  },
};
</script>
<style lang="less">
.seckill {
  width: 100%;
  height: 24rem;
  background-color: #fff;
  .seckill-top {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: 1.5rem;
      margin-left: 1rem;
    }
    .skill-time {
      width: 60%;
      display: flex;
      span {
        padding: 0.2rem 0.4rem;
        height: 1.5rem;
        line-height: 1.5rem;
        border-radius: 2.5rem;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
      }
      i {
        margin: 0 0.5rem;
      }
    }
    // 更多样式
    a {
      font-size: 1.3rem;
      margin-left: 0.5rem;
      padding-left: 0.5rem;
      border-left: 1px solid rgb(216, 213, 213);
    }
  }
  //   秒杀列表的样式
  .seckill-list {
    ul {
      width: 100%;
      height: 19rem;
      display: flex;
      overflow: auto;
      // 写样式时,要注意数据的变化会不会影响页面
      li {
        width: 11rem;
        height: 19rem;
        img {
          width: 10rem;
          height: 10rem;
          margin-left: 0.5rem;
        }
        .title {
          width: 90%;
          margin: 5%;
          height: 4rem;
          line-height: 2rem;
          font-size: 1.2rem;
          //   多行文本省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .current_price {
          color: #e22c2c;
          font-weight: 700;
          text-align: center;
          span {
            font-size: 1.5rem;
            em {
              font-size: 1.05rem;
            }
          }
        }
        .rebate_price {
          text-align: center;
          color: #ccc;
          text-decoration: line-through;
        }
      }
    }
  }
  //   使滚动条隐藏
  .seckill-list ul::-webkit-scrollbar {
    display: none;
  }
}
</style>